<template>
<view class="control-detail">
  <view class="control-box">
    <view class="cont">
      <view class="clearfix">
        <view class="brand">{{airBrand[info.air_brand]}}</view>
        <view class="switch">{{state}}</view>
      </view>
      <view class="parameter clearfix">
        <view class="temperature">{{code}}℃</view>
        <view class="mode heating">{{status}}</view>
      </view>
    </view>
  </view>

  <view class="btns clearfix">
    <view class="btn-box" @tap="openAir">
      <view class="btn btn1">开</view>
    </view>
    <view class="btn-box" @tap="closeAir">
      <view class="btn btn2">关</view>
    </view>
    <view class="btn-box" @tap="plusAir">
      <view class="btn btn3">加</view>
    </view>
    <view class="btn-box" @tap="coolAir">
      <view class="btn btn3 btn-cold">制冷模式</view>
    </view>
    <view class="btn-box" @tap="hotAir">
      <view class="btn btn3">制热模式</view>
    </view>
    <view class="btn-box" @tap="reduceAir">
      <view class="btn btn3">减</view>
    </view>
  </view>
</view>
</template>

<script>
var app = getApp();
var deviceToken = '';
var deviceBrand = '';
var hotOrCool = {
  100: "制热",
  200: "制冷"
};
var timeOutFlag = null;
var MAX_CODE = 36;
var MIN_CODE = 16;
var hotOrCool_CODE = {
  "制热": 100,
  "制冷": 200
};

export default {
  data() {
    return {
      grade_dict: ['', '一', '二', '三', '四', '五', '六'],
      airBrand: {
        2000: "大金",
        3000: "AUX",
        4000: "格力"
      },
      state: '离线',
      online: ["离线", "在线"],
      code: '--',
      status: '--',
      info: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    deviceToken = options.token;
    deviceBrand = options.brand;
    this.getInfo(options.air_id, options.is_online);

    if (options.is_online == 1) {
      //this.getAirStatus( options.dieline);
      this.setData({
        state: "在线"
      });
    }

    var title = options.class;

    if (options.grade > 0) {
      title = `${this.grade_dict[options.grade]}年级${title}`;
    }

    uni.setNavigationBarTitle({
      title: title
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getAirStatus: function (dieline) {
      var that = this;
      app.globalData.JsonPost("api/device/status", {
        token: deviceToken
      }, function (res) {
        console.log(res);
        var state = '关';
        console.log(res.data.datapoint.x);

        if (res.data.datapoint.x > parseInt(dieline)) {
          state = '开';
        }

        console.log(dieline);
        that.setData({
          state: state
        });
      });
    },
    getInfo: function (air_id, is_online) {
      var that = this;
      app.globalData.JsonPost("api/Air/getAirInfo", {
        air_id: air_id
      }, function (res) {
        console.log(res);
        that.setData({
          info: res.data
        });

        if (res.data.air_state) {
          that.setCodeStauts(res.data.air_state.temperature, res.data.air_state.status);
        }
      });
    },
    setCodeStauts: function (code, status) {
      var state = '开';
      var hotcool = hotOrCool[status];

      if (code == "00") {
        state = '关';
        code = '--';
        hotcool = '--';
      }

      this.setData({
        code: code,
        status: hotcool,
        state: state
      });
    },
    openAir: function () {
      var that = this;
      var state = that.state;

      if (state == '离线') {
        return false;
      }

      app.globalData.JsonPost("api/device/rpc", {
        token: deviceToken,
        brand: deviceBrand
      }, function (res) {
        console.log(res);
        that.setCodeStauts(res.data.temperature, res.data.state);
      });
    },
    closeAir: function () {
      var that = this;
      var state = that.state;

      if (state != '开') {
        return false;
      }

      app.globalData.JsonPost("api/device/rpc", {
        token: deviceToken,
        brand: deviceBrand,
        code: '00'
      }, function (res) {
        console.log(res);
        that.setCodeStauts(res.data.temperature, res.data.state);
      });
    },
    hotAir: function () {
      var that = this;
      var state = that.state;

      if (state != '开') {
        return false;
      }

      app.globalData.JsonPost("api/device/rpc", {
        token: deviceToken,
        brand: deviceBrand,
        code: '25',
        hotOrCool: "100"
      }, function (res) {
        console.log(res);
        that.setCodeStauts(res.data.temperature, res.data.state);
      });
    },
    coolAir: function () {
      var that = this;
      var state = that.state;

      if (state != '开') {
        return false;
      }

      app.globalData.JsonPost("api/device/rpc", {
        token: deviceToken,
        brand: deviceBrand,
        code: '15',
        hotOrCool: "200"
      }, function (res) {
        console.log(res);
        that.setCodeStauts(res.data.temperature, res.data.state);
      });
    },
    plusAir: function () {
      var that = this;
      var code = that.code;
      var state = that.state;

      if (state != '开') {
        return false;
      }

      console.log(code);

      if (that.code < MAX_CODE) {
        that.setData({
          code: parseInt(code) + 1
        });
      } else {
        return false;
      }

      if (timeOutFlag != null) {
        clearTimeout(timeOutFlag);
        console.log(timeOutFlag);
      }

      timeOutFlag = setTimeout(function () {
        app.globalData.JsonPost("api/device/rpc", {
          token: deviceToken,
          brand: deviceBrand,
          code: parseInt(code) + 1,
          hotOrCool: hotOrCool_CODE[that.status]
        }, function (res) {
          console.log(res);
          timeOutFlag = null;
        });
      }, 500);
    },
    reduceAir: function () {
      var that = this;
      var code = parseInt(that.code);
      var state = that.state;

      if (state != '开') {
        return false;
      }

      console.log(code);

      if (that.code > MIN_CODE) {
        that.setData({
          code: code - 1
        });
      } else {
        return false;
      }

      if (timeOutFlag != null) {
        clearTimeout(timeOutFlag);
        console.log(timeOutFlag);
      }

      timeOutFlag = setTimeout(function () {
        app.globalData.JsonPost("api/device/rpc", {
          token: deviceToken,
          brand: deviceBrand,
          code: code - 1,
          hotOrCool: hotOrCool_CODE[that.status]
        }, function (res) {
          console.log(res);
          timeOutFlag = null;
        });
      }, 500);
    }
  }
};
</script>
<style>
.control-box {
  margin: 14px;
}

.control-detail {
  overflow: hidden;
}

.control-detail .cont {
  color: #fff;
  padding: 8px 10px;
  background-color: rgb(41, 140, 235);
  -webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 0 0.1em 0.2em;
  -moz-box-shadow: inset rgba(0, 0, 0, 0.2) 0 0.1em 0.2em;
  box-shadow: inset rgba(0, 0, 0, 0.2) 0 0.1em 0.2em;
  border-radius: 5px;
}

.control-detail .brand {
  float: left;
  font-size: 14px;
  line-height: 14px;
  padding: 0 5px;
  margin-top: 2px;
}

.control-detail .switch {
  float: right;
  font-size: 14px;
  line-height: 20px;
}

.control-detail .parameter {
  margin-top: 15px;
}

.control-detail .temperature {
  float: left;
  font-size: 30px;
  line-height: 40px;
}

.control-detail .mode {
  float: right;
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
}

.control-detail .tit {
  font-size: 14px;
  text-align: center;
  line-height: 18px;
  padding: 4px;
}

/*按钮*/

.btns {
  margin: 6px;
  box-sizing: border-box;
}

.btn-box {
  float: left;
  box-sizing: border-box;
  width: 33.33333%;
  padding: 6px;
}

.btn {
  display: block;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
  color: #fff;
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.4) 0 0.2em 0.2em,
                        inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.2em,
                        hsl(0, 0%, 60%) 0 0.1em 3px,
                        hsl(0, 0%, 50%) 0 0.2em 1px,
                        rgba(0, 0, 0, 0.15) 0 0.3em 3px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.4) 0 0.2em 0.2em,
                     inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.2em,
                     hsl(0, 0%, 60%) 0 0.1em 3px,
                     hsl(0, 0%, 50%) 0 0.2em 1px,
                     rgba(0, 0, 0, 0.15) 0 0.3em 3px;
  box-shadow: inset rgba(255, 255, 255, 0.4) 0 0.2em 0.2em,
                inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.2em,
                hsl(0, 0%, 60%) 0 0.1em 3px,
                hsl(0, 0%, 50%) 0 0.2em 1px,
                rgba(0, 0, 0, 0.15) 0 0.3em 3px;
  padding: 0;
  border-radius: 5px;
  margin: 0;
}

.btn:active {
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.3) 0 0.1em 0.1em,
                        inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.2em,
                        rgba(0, 0, 0, 0.2) 0 0.1em 1px,
                        rgba(0, 0, 0, 0.1) 0 0.2em 4px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.3) 0 0.1em 0.1em,
                     inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.2em,
                     rgba(0, 0, 0, 0.2) 0 0.1em 1px,
                     rgba(0, 0, 0, 0.1) 0 0.2em 4px;
  box-shadow: inset rgba(255, 255, 255, 0.3) 0 0.1em 0.1em,
                inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.2em,
                rgba(0, 0, 0, 0.2) 0 0.1em 1px,
                rgba(0, 0, 0, 0.1) 0 0.2em 4px;
  -webkit-transform: translateY(0.2em);
  -moz-transform: translateY(0.2em);
  transform: translateY(0.2em);
}

.btn:focus {
  outline: none;
  color: rgba(254, 255, 255, 0.9) !important;
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
}

.btn1 {
  background-color: rgba(8, 187, 7, 0.97);
}

.btn2 {
  background-color: rgba(255, 137, 0, 0.97);
}

.btn3 {
  background-color: rgba(255, 190, 0, 0.97);
}

.btn1:hover {
  background-color: rgb(8, 187, 7);
}

.btn2:hover {
  background-color: rgb(255, 137, 0);
}

.btn3:hover {
  background-color: rgb(255, 190, 0);
}
.btn-cold{
  background-color: rgb(69, 137, 148);
}
</style>